<template>
    <div>

        <div class="top">
            <van-icon name="wap-home-o" color="red"/>
            <div class="tilte">{{songDetail.songinfo.title}}</div>
            <van-icon name="search" />
        </div>

<!--        中间-->
        <div class="middle">
            <div :style="{'animation-play-state':animationPlayState,color:color}">
                <img @click="turn" :src="songDetail.songinfo.pic_radio" alt=""></div>
            <div class="song">
                <ul ref="list">
                    <li v-for="(item,index) in lrcContent" :key="index" :class="index == active?'active1':''" @click="changeSong(item.time)">{{item.content}}</li>

                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="bottomIcon">
                <van-icon name="like-o"  v-show="!isLike" @click="isLike1"/>
                <van-icon name="like" color="red" v-show="isLike" @click="isLike1" />

                <a :href="songDetail.songinfo.lrclink"> <van-icon name="down" /></a>
            </div>

            <div class="audio">
                <audio ref="audio" :src="songDetail.bitrate.show_link" controls></audio>
            </div>

        </div>

    </div>
</template>

<script>
    import { Dialog } from 'vant';
    import {getSongDetail} from "../api/api"
    export default {
        name: "musicDetail0",
        data(){
            return{
                // animationPlayState:"paused"
                animationPlayState:"paused",
                color:"red",
                songDetail:{songinfo:"",bitrate:""},
                isLike:false,
                content:"[ti:大鱼]\r\n[ar:周深]\r\n[al:大鱼]\r\n[by:0]\r\n[offset:0]\r\n[00:02.27]大鱼 (《大鱼海棠》动画电影印象曲) \r\n[00:02.94]\r\n[00:03.63]作词：尹约\r\n[00:04.32]作曲：钱雷\r\n[00:04.91]演唱：周深\r\n[00:05.49]\r\n[00:43.27]海浪无声将夜幕深深淹没\r\n[00:50.09]漫过天空尽头的角落\r\n[00:56.79]大鱼在梦境的缝隙里游过\r\n[01:03.76]凝望你沉睡的轮廓\r\n[01:09.88]看海天一色 听风起雨落\r\n[01:16.48]执子手吹散苍茫茫烟波\r\n[01:23.61]大鱼的翅膀 已经太辽阔\r\n[01:31.09]我松开时间的绳索\r\n[01:37.30]怕你飞远去 怕你离我而去\r\n[01:43.87]更怕你永远停留在这里\r\n[01:50.76]每一滴泪水 都向你流淌去\r\n[01:58.58]倒流进天空的海底\r\n[02:04.68]\r\n[02:19.11]海浪无声将夜幕深深淹没\r\n[02:25.86]漫过天空尽头的角落\r\n[02:32.76]大鱼在梦境的缝隙里游过\r\n[02:39.58]凝望你沉睡的轮廓\r\n[02:45.63]看海天一色 听风起雨落\r\n[02:52.41]执子手吹散苍茫茫烟波\r\n[02:59.30]大鱼的翅膀 已经太辽阔\r\n[03:07.08]我松开时间的绳索\r\n[03:13.09]看你飞远去 看你离我而去\r\n[03:19.86]原来你生来就属于天际\r\n[03:26.68]每一滴泪水 都向你流淌去\r\n[03:34.51]倒流回最初的相遇\r\n[03:44.44]\r\n",
                lrcContent:[],
                currentTime:0,
                active:0,
                noScroll:false,
            }
        },
        created() {
            // console.log(this.$route.query.songid)
            getSongDetail(this.$route.query.songid).then(res =>{
                // console.log(res)
                this.songDetail = res
            });


        //    处理歌词
            let lyrics = this.content.split("\r\n")

            // console.log(lyrics)
            // 判断一下我们这个字符串有没有时间
            let reg = /\[\d*:\d*\.\d*\]/g;
            lyrics.forEach(item => {
                let content = item.match(reg);

                // console.log(content)
                // match
                if (content) {
                    // 匹配到了内容，在这个时候再做后续的处理
                    content.forEach(timeItem => {
                        // console.log(item)
                        // [00:04.000]
                        // 这里的item就是我们时间的前缀
                        // 获取时间的分钟数
                        // [00
                        // 00
                        let min = Number(timeItem.match(/\[\d*/)[0].replace("[", ""));
                        let sec = Number(timeItem.match(/:\d*/)[0].replace(":", ""));
                        // 最终的秒数
                        let time = min * 60 + sec;
                        let contentStr = item.replace(reg, "");
                        if (contentStr) {
                            this.lrcContent.push({
                                time:time,
                                content: contentStr
                            })
                        }
                    })
                }
            })

            // console.log(this.lrcContent)

        },
        watch:{
            currentTime() {
                // console.log(this.currentTime)
                // 根据这个时间判断激活的歌词是哪一个

                // 普通for循环
                for (let i = 0; i < this.lrcContent.length; i++) {
                    if (this.lrcContent[i].time > this.currentTime) {
                        if (i > 0) {
                            this.active = i - 1;
                        }

                        if (!this.noScroll) {
                            this.$refs.list.scrollTop = this.$refs.list.children[this.active].offsetTop - 50 ;


                        console.log(this.$refs.list.children[this.active].offsetTop)
                        }
                        break;
                    }
                }
            }
        },
        methods:{
            turn(){
                // this.animationPlayState = "running"
                this.animationPlayState = "paused"
            },
        //    收藏，喜欢歌曲
            isLike1(){
                Dialog.confirm({
                    title: '确定吗？',
                    message: '真的要这样做吗？',
                })
                    .then(() => {
                        // on confirm
                        this.isLike = !this.isLike
                    })
                    .catch(() => {
                        // on cancel
                    });


            },

        //    点击改变音乐进度
            changeSong(time){
                this.$refs.audio.currentTime = time
            }
        },

        mounted() {

            this.$refs.audio.addEventListener("timeupdate",()=>{
                // console.log(this.$refs.audio.currentTime)
                this.currentTime = this.$refs.audio.currentTime
            });
            this.$refs.audio.addEventListener("play",  ()=> {   //开始播放时触发
                this.animationPlayState = 'running';
                console.log(this.animationPlayState)
            });
            this.$refs.audio.addEventListener("pause",  ()=> {   // 暂停时会触发，当播放完一首歌曲时也会触发
                this.animationPlayState = 'paused'
            })

        //    触摸歌词停止滚动
            this.$refs.list.addEventListener("touchstart", () => {
                if (this.timeoutId) {
                    clearTimeout(this.timeoutId);
                }
                this.noScroll = true;
            });
            this.$refs.list.addEventListener("touchend", () => {
                this.timeoutId = setTimeout(() => {
                    this.noScroll = false
                }, 2000)
            });

        }
    }
</script>

<style scoped lang="less">
    i {
        font-size: 28px;
    }
    .top {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        padding: 0 8px;
    }

    .middle div:nth-of-type(1) {
        display: flex;
        justify-content: center;
        margin: 30px 0;
        animation: spin 12s linear infinite;
        /*animation-play-state:paused;*/
        animation-play-state:running;


        img {
          width: 60%;
          border-radius: 50%;
        }
    }
    .middle div:nth-of-type(2) {
        height: 150px;
        /*background: hotpink;*/
    }

    .bottomIcon{
        display: flex;
        justify-content: space-between;
        padding: 0 40px;
        margin: 10px 0;
    }
    .audio {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
    .song {
        ul{
            position: relative;
            overflow: scroll;
            height: 150px;
        }
        li{
            text-align: center;
        }

    }

    @-webkit-keyframes spin {
        to {
            transform: rotate(1turn);
        }
    }

    .active1 {
        color: red;
        font-size: 18px;
    }

</style>
